<!--/****⽣成⽇期: 2024-11-27 23:43:32****/-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>导航页面</title>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
        #container {
          width: 100%;
          height: 100vh;
          background-color: pink;
        }
    </style>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: 'eb1e383cd89c9aa0c535f5263545c029',
        }
    </script>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=621ba3758298ae697c0b6ca59224d157"></script>
</head>

<body>
<div id="container"></div>

<script type="text/javascript">
    var map = new AMap.Map('container', {
      zoom: 15,
      center: [116.487971, 39.836983],
    })

    map.setZoomAndCenter(18, [116.487971, 39.836983])

    // 方式一：建立通道通信
    // //message事件是一种特定于‌跨文档通信‌的事件类型，它允许不同来源（如不同域名、协议或端口）的文档之间进行安全通信。这主要通过Window.postMessage方法来实现，而接收消息的一方则需要通过监听message事件来处理这些消息
    // var h5Port
    // window.addEventListener('message', (e) => {
    //   alert(JSON.stringify(e.data))
    //   if (e.data === '__init_port__') {
    //     h5Port = e.ports[0]
    //     if (h5Port) {
    //       h5Port.postMessage(JSON.stringify({ type: 'connectOK' }))
    //     }
    //   }
    // })

    //  方式二：注入Sdk
    window.addEventListener('load', (e) => {
      if (window.xiaoshi) {
        // xiaoshi.alert('代理了alter事件:从html调harmony原生的alert方法')
        // xiaoshi.prompt('代理了prompt事件:从html调用harmony原生的prompt方法')
        window.xiaoshi.getLocation('getLocation')
      }
    })

    function getLocation(lon, lat) {
     // window.xiaoshi.alert(`经度:${lon}--纬度是:${lat}`)
      // 把坐标定位对应的经纬度上
      map.setZoomAndCenter(15, [lon, lat])
      // 根据当前位置获取周边的信息
      map.plugin(['AMap.PlaceSearch'], () => {
        // 构造PlaceSearch类
        var MSearch = new AMap.PlaceSearch({
          pageSize: 4,
          pageIndex: 1, //请求的页码
          extensions: 'base', //返回信息详力 默认是base(基本信息)
        })

        AMap.event.addListener(MSearch, 'complete', (result) => {
        // window.xiaoshi.alert(JSON.stringify(result))
          // 返回结果
          window.xiaoshi.receiveData('search_list', JSON.stringify(result?.poiList?.pois || []))
s
        })
        MSearch.searchNearBy('地点', new AMap.LngLat(lon, lat)) //关键字查询
      })
    }
    // function fnInHtml(msg) {
    //   xiaoshi.alert('我在html中,等原生harmony给我发信息:' + msg)
    //   console.log('我在html中,等原生harmony给我发信息:' + msg)
    // }
</script>
</body>
</html>
